<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>6.复杂的背景图案</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
    /*
    难题：让背景呈现出很多其他不用类型图案

    一、网格

      1. 多个渐变组合起来

        background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), 
          linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);

      2. 多个渐变组合起来2

        background-image: linear-gradient(), linear-gradient(), linear-gradient(), ...;
        background-size: 75px 75px, 75px 75px, 15px 15px, ...;
    
    二、波点

      1. 波点

        background-image: radial-gradient(tan 30%, transparent 0); 
        background-size: 30px 30px;

      2. 将背景定位错开

        background-image: radial-gradient(), radial-gradient(); 
        background-size: 30px 30px; 
        background-position: 0 0, 15px 15px;
    
    三、棋盘

      1. 用两个直角三角形来拼合出我们想要的方块，见下方原理

        background-image: linear-gradient(45deg, #bbb 25%, transparent 0), 
          linear-gradient(45deg, transparent 75%, #bbb 0); 
        background-position: 0 0, 15px 15px; 
        background-size: 30px 30px;

      2. 棋盘完整：上面基础上添加另一半正方形
      
        background-image: linear-gradient(45deg, 
          rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0), 
          linear-gradient(...);
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;

      3. sass 实现

        @mixin checkerboard($size, $base, $accent: rgba(0, 0, 0, .25)) {
          background: $base;
          background-image: linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0),
            linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0);
          background-position: 0, 0, $size, $size;
          background-size: 2*size 2*$size;
        }
        // 调用 
        @include checkerboard(15px, #58a, tan);

      4. svg 实现

        background: #eee url('data:image/svg+xml, <svg>...</svg>');
        background-size: 30px 30px;

  */
  </script>

  <style>
    .div1 {
      width: 300px;
      height: 80px;
      background: white;
      background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
        linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
      background-size: 30px, 30px;
    }

    .div2 {
      width: 300px;
      height: 300px;
      background: #58a;
      background-image:
        linear-gradient(white 2px, transparent 0),
        linear-gradient(90deg, white 2px, transparent 0),
        linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
        linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
      background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    }

    .div3 {
      width: 300px;
      height: 90px;
      background: #655;
      background-image: radial-gradient(tan 30%, transparent 0);
      background-size: 30px 30px;
    }

    .div4 {
      width: 300px;
      height: 90px;
      background: #655;
      background-image: radial-gradient(tan 30%, transparent 0),
        radial-gradient(tan 30%, transparent 0);
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
    }

    .div5 {
      width: 300px;
      height: 90px;
      background: #eee;
      background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, rgb(134, 134, 134) 0);
      background-position: 0 0, 15px 15px;
      background-size: 30px 30px;
    }

    .div6 {
      width: 300px;
      height: 90px;
      background: #eee;
      background-image: linear-gradient(45deg,
        rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
        linear-gradient(45deg,
        rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
      background-position: 0 0, 15px 15px;
      background-size: 30px 30px;
    }

    .div7 {
      width: 300px;
      height: 90px;
      background: #eee url('data:image/svg+xml, \
        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" > \
          <rect x="50" width="50" height="50" /> \
          <rect y="50" width="50" height="50" /> \
        </svg>');
      background-size: 30px 30px;
    }
  </style>
</head>
<body>
  <div class="div1">多个渐变组合起来</div>
  <br />
  <div class="div2">多个渐变组合起来2</div>
  <br />
  <div class="div3">波点</div>
  <br />
  <div class="div4">将背景定位错开</div>
  <br />
  <p>斜向无缝连接原理：</p>
  <img src="../images/3.棋盘背景原理.jpg" alt="棋盘背景原理">
  <br />
  <div class="div5">棋盘</div>
  <br />
  <div class="div6">棋盘完整</div>
  <br />
  <div class="div7">svg棋盘</div>
</body>
</html>